<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最新消息 - 姓氏百科</title>
    <link rel="stylesheet" href="src/style.css">
    <script src="src/script.js"></script>
    <style>
        /* 新闻列表特有样式 */
        .news-page {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .page-header h1 {
            font-size: 36px;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        .page-header p {
            font-size: 18px;
            color: var(--text-color-secondary);
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* 新闻列表 */
        .news-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .news-card {
            background-color: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .news-img {
            height: 200px;
            overflow: hidden;
        }
        
        .news-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .news-card:hover .news-img img {
            transform: scale(1.05);
        }
        
        .news-content {
            padding: 20px;
        }
        
        .news-content h3 {
            font-size: 20px;
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .news-content h3 a {
            color: var(--text-color);
            text-decoration: none;
        }
        
        .news-content h3 a:hover {
            color: var(--primary-color);
        }
        
        .news-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 14px;
            color: #999;
        }
        
        .news-excerpt {
            color: var(--text-color-secondary);
            line-height: 1.6;
            margin-bottom: 20px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .read-more {
            display: inline-block;
            padding: 8px 20px;
            background-color: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .read-more:hover {
            background-color: #2c4c7c;
        }
        
        /* 筛选和排序 */
        .news-filters {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .filter-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .filter-group label {
            font-weight: bold;
            color: var(--text-color);
        }
        
        .filter-group select {
            padding: 8px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: white;
            font-size: 14px;
        }
        
        .search-box {
            position: relative;
        }
        
        .search-box input {
            padding: 8px 40px 8px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            width: 250px;
            font-size: 14px;
        }
        
        .search-box .search-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        
        .pagination button {
            padding: 8px 15px;
            border: 1px solid var(--border-color);
            background-color: white;
            color: var(--text-color);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .pagination button:hover:not(:disabled) {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .pagination .page-number {
            padding: 8px 15px;
            border: 1px solid var(--border-color);
            background-color: white;
            color: var(--text-color);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .pagination .page-number.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 福帮手信息区 */
        .fubangshou-section {
            background-color: rgba(58, 110, 165, 0.1);
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 40px;
            text-align: center;
        }
        
        .fubangshou-section h2 {
            font-size: 24px;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        .fubangshou-section p {
            color: var(--text-color-secondary);
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .news-filters {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .filter-group {
                width: 100%;
                justify-content: space-between;
            }
            
            .search-box input {
                width: 100%;
            }
            
            .news-list {
                grid-template-columns: 1fr;
            }
            
            .pagination {
                flex-wrap: wrap;
            }
            
            .page-header h1 {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <div class="logo">
            <h1>姓氏百科</h1>
        </div>
        <div class="nav-links">
            <a href="index.html">首页</a>
            <a href="family-tree.html">姓氏知识库</a>
            <a href="personage.html">当代族人</a>
            <a href="news.html" class="active">最新消息</a>
            <a href="about.html">关于我们</a>
        </div>
        <!-- 语言切换 -->
        <div class="language-switcher">
            <select id="languageSelect">
                <option value="zh-CN">简体中文</option>
                <option value="zh-TW">繁体中文</option>
                <option value="en">English</option>
                <option value="ja">日本語</option>
                <option value="ko">한국어</option>
                <option value="vi">Tiếng Việt</option>
                <option value="ru">Русский</option>
            </select>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="news-page">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>最新消息</h1>
            <p>由福帮手自动追踪并验证的上市公司控股人及公司的最新动态和新闻</p>
        </div>
        
        <!-- 福帮手信息区 -->
        <div class="fubangshou-section">
            <h2>福帮手自动追踪系统</h2>
            <p>我们通过先进的福帮手追踪系统，实时监控和收集上市公司控股人及公司的最新动态，确保为您提供最及时、最准确的信息。所有新闻均经过福帮手系统验证，保证信息的可靠性。</p>
        </div>
        
        <!-- 筛选和搜索 -->
        <div class="news-filters">
            <div class="filter-group">
                <label for="categoryFilter">分类:</label>
                <select id="categoryFilter">
                    <option value="all">全部</option>
                    <option value="company">公司动态</option>
                    <option value="person">人物新闻</option>
                    <option value="industry">行业资讯</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="nameFilter">姓氏:</label>
                <select id="nameFilter">
                    <option value="all">全部</option>
                    <option value="zhang">张</option>
                    <option value="li">李</option>
                    <option value="wang">王</option>
                    <option value="zhao">赵</option>
                    <option value="liu">刘</option>
                </select>
            </div>
            <div class="search-box">
                <input type="text" placeholder="搜索新闻..." id="newsSearch">
                <div class="search-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                    </svg>
                </div>
            </div>
        </div>
        
        <!-- 新闻列表 -->
        <div class="news-list">
            <!-- 新闻卡片1 -->
            <div class="news-card">
                <div class="news-img">
                    <img src="src/placeholder-news.svg" alt="科技集团新品发布会">
                </div>
                <div class="news-content">
                    <div class="news-meta">
                        <span>科技日报</span>
                        <span>2023-10-15</span>
                    </div>
                    <h3><a href="news-detail.html?id=1">科技集团发布全新一代人工智能产品，张三董事长出席发布会</a></h3>
                    <p class="news-excerpt">今日，科技集团在北京国际会议中心举行盛大发布会，正式发布全新一代人工智能产品"智能助手X"。科技集团董事长张三亲自出席发布会，并向全球用户介绍了这款革命性产品的核心功能和创新亮点。</p>
                    <a href="news-detail.html?id=1" class="read-more">阅读全文</a>
                </div>
            </div>
            
            <!-- 新闻卡片2 -->
            <div class="news-card">
                <div class="news-img">
                    <img src="src/placeholder-news.svg" alt="张三接受专访">
                </div>
                <div class="news-content">
                    <div class="news-meta">
                        <span>财经杂志</span>
                        <span>2023-10-08</span>
                    </div>
                    <h3><a href="news-detail.html?id=2">张三接受专访，分享科技集团未来发展战略</a></h3>
                    <p class="news-excerpt">在近日的一次专访中，科技集团董事长张三详细阐述了公司未来五年的发展战略，包括在人工智能、云计算、大数据等领域的布局和投资计划。</p>
                    <a href="news-detail.html?id=2" class="read-more">阅读全文</a>
                </div>
            </div>
            
            <!-- 新闻卡片3 -->
            <div class="news-card">
                <div class="news-img">
                    <img src="src/placeholder-news.svg" alt="科技集团业绩增长">
                </div>
                <div class="news-content">
                    <div class="news-meta">
                        <span>经济观察报</span>
                        <span>2023-10-01</span>
                    </div>
                    <h3><a href="news-detail.html?id=3">科技集团第三季度业绩大幅增长，张三表示将持续投入研发</a></h3>
                    <p class="news-excerpt">科技集团今日发布的第三季度财报显示，公司营收和利润均实现了同比30%以上的增长。董事长张三表示，公司将继续加大在研发领域的投入，保持技术创新优势。</p>
                    <a href="news-detail.html?id=3" class="read-more">阅读全文</a>
                </div>
            </div>
            
            <!-- 新闻卡片4 -->
            <div class="news-card">
                <div class="news-img">
                    <img src="src/placeholder-news.svg" alt="中国企业家协会">
                </div>
                <div class="news-content">
                    <div class="news-meta">
                        <span>中国企业家</span>
                        <span>2023-09-25</span>
                    </div>
                    <h3><a href="news-detail.html?id=4">张三当选中国企业家协会副会长</a></h3>
                    <p class="news-excerpt">在近日召开的中国企业家协会年会上，科技集团董事长张三当选为副会长。这一任命不仅是对张三个人领导能力的认可，也体现了科技集团在行业内的重要地位。</p>
                    <a href="news-detail.html?id=4" class="read-more">阅读全文</a>
                </div>
            </div>
            
            <!-- 新闻卡片5 -->
            <div class="news-card">
                <div class="news-img">
                    <img src="src/placeholder-news.svg" alt="公益活动">
                </div>
                <div class="news-content">
                    <div class="news-meta">
                        <span>公益时报</span>
                        <span>2023-09-18</span>
                    </div>
                    <h3><a href="news-detail.html?id=5">张三宣布科技集团将投入1亿元用于教育公益事业</a></h3>
                    <p class="news-excerpt">在第39个教师节来临之际，科技集团董事长张三宣布，公司将投入1亿元设立教育公益基金，用于支持贫困地区的教育事业发展，包括建设学校、资助贫困学生等。</p>
                    <a href="news-detail.html?id=5" class="read-more">阅读全文</a>
                </div>
            </div>
            
            <!-- 新闻卡片6 -->
            <div class="news-card">
                <div class="news-img">
                    <img src="src/placeholder-news.svg" alt="战略合作协议">
                </div>
                <div class="news-content">
                    <div class="news-meta">
                        <span>科技日报</span>
                        <span>2023-09-10</span>
                    </div>
                    <h3><a href="news-detail.html?id=6">科技集团与国际科技巨头达成战略合作，张三出席签约仪式</a></h3>
                    <p class="news-excerpt">科技集团今日宣布与国际科技巨头达成战略合作协议，双方将在人工智能、云计算等领域展开深度合作。科技集团董事长张三与对方高管共同出席了签约仪式。</p>
                    <a href="news-detail.html?id=6" class="read-more">阅读全文</a>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination">
            <button disabled>上一页</button>
            <div class="page-number active">1</div>
            <div class="page-number">2</div>
            <div class="page-number">3</div>
            <div class="page-number">4</div>
            <div class="page-number">5</div>
            <button>下一页</button>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>姓氏百科致力于记录和传承中国姓氏文化，连接历史与现代。</p>
            </div>
            <div class="footer-section">
                <h3>联系方式</h3>
                <p>邮箱: contact@xingshibaike.com</p>
            </div>
            <div class="footer-section">
                <h3>关注我们</h3>
                <div class="social-links">
                    <a href="#">微信公众号</a>
                    <a href="#">微博</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 姓氏百科 版权所有</p>
        </div>
    </footer>

    <script>
        // 页面加载完成后执行
        window.addEventListener('DOMContentLoaded', function() {
            // 初始化语言选择器
            initLanguageSelector();
            
            // 分类筛选功能
            const categoryFilter = document.getElementById('categoryFilter');
            categoryFilter.addEventListener('change', function() {
                filterNews();
            });
            
            // 姓氏筛选功能
            const nameFilter = document.getElementById('nameFilter');
            nameFilter.addEventListener('change', function() {
                filterNews();
            });
            
            // 搜索功能
            const newsSearch = document.getElementById('newsSearch');
            newsSearch.addEventListener('input', function() {
                filterNews();
            });
            
            // 分页功能
            const pageNumbers = document.querySelectorAll('.page-number');
            pageNumbers.forEach(number => {
                number.addEventListener('click', function() {
                    // 移除所有活动状态
                    pageNumbers.forEach(num => num.classList.remove('active'));
                    // 添加当前活动状态
                    this.classList.add('active');
                    // 这里可以添加加载对应页码新闻的逻辑
                    console.log('切换到页码:', this.textContent);
                });
            });
            
            // 下一页按钮
            const nextPageBtn = document.querySelector('.pagination button:last-child');
            nextPageBtn.addEventListener('click', function() {
                // 这里可以添加加载下一页新闻的逻辑
                console.log('加载下一页');
            });
            
            // 筛选新闻的函数
            function filterNews() {
                const category = categoryFilter.value;
                const name = nameFilter.value;
                const searchTerm = newsSearch.value.toLowerCase();
                
                console.log('筛选条件:', category, name, searchTerm);
                // 这里可以添加实际的筛选逻辑
                // 由于是模拟数据，这里仅打印筛选条件
            }
        });
    </script>
</body>
</html>